<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-weight属性说明</title>
    <style>

        .light {
            /*
            功能:
                该属性用于设置字体的宽度.
            说明:
                1.
            */
            font-weight: lighter;
        }
        .bold {
            font-weight: bold;
        }
        .bolder {
            font-weight: bolder;
        }

        .my {
            /*
            说明:
                1. 根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。
                    - 400与normal相同，700与bold相同。
            */
            font-weight: 500;
        }

    </style>
</head>
<body>
<p class="light">This is a font with a "lighter" weight.</p>
<p class="bold">This is a font with a "bold" weight.</p>
<p class="bolder">This is a font with a "bolder" weight.</p>
<p class="my">This is a font with a "bolder" weight.</p>
</body>
</html>